<template>
  <div>
    <div class="header">
      <van-search
        shape="round"
        v-model.trim="value"
        placeholder="请输入搜索关键词"
        @input="iptV"
      />
      <span class="txt" @click="toBack">取消</span>
    </div>

    <!-- 初始,历史记录,热门 -->
    <div class="init" v-if="flag == 'init'">
      <!-- 历史记录 -->
      <div class="history" v-if="startData.historyData">
        <div class="history-txt"  v-if="startData.historyData.length">
          <span>历史记录</span>
          <van-icon @click="del" name="delete-o" />
        </div>
        <ul class="historyData">
          <li
            class="historyData-item"
            v-for="item in startData.historyData"
            :key="item.id"
            @click="toGood(item.keyword)"
          >
            {{ item.keyword }}
          </li>
          <li class="clear"></li>
        </ul>
      </div>
      <!-- 热门 -->
      <div class="hot">
        <span class="hot-txt">热门搜索</span>
        <ul class="hotKeywordList">
          <li
            class="hotKeywordList-item"
            v-for="item in startData.hotKeywordList"
            :key="item.id"
            @click="toGood(item.keyword)"
          >
            {{ item.keyword }}
          </li>
          <li class="clear"></li>
          <li class="clear"></li>
        </ul>
      </div>
    </div>

    <!-- 提示 -->
    <div class="notice" v-else-if="flag == 'notice'">
      提示
      <ul class="noticeList">
        <li
          v-for="item in key.keywords"
          class="notice-item"
          :key="item.id"
          @click="toGood(item.name)"
        >
          <span class="txt-l">{{ item.name }}</span>
          <van-icon class="txt-r" name="arrow" />
        </li>
      </ul>
    </div>

    <!-- 商品展示 -->
    <div class="footer-goods" v-else-if="flag == 'goodList'">
      <ul class="newGoodList">
        <li
          class="newGoodList-item"
          v-for="el in goods.keywords"
          :key="el.id"
          @click="toGoodsDetail(el.id)"
        >
          <img class="img" :src="el.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ el.name }}</span>
            <span class="txt-b">{{ el.retail_price }}</span>
          </div>
        </li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { start, keyWord, history, clearhistoryAction } from "@/api/search";
export default {
  name: "",
  data() {
    return {
      value: "",
      flag: "init",
      startData: [],
      key: [],
      goods: [],
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      start({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.startData = res;
      });
    },
    toBack() {
      this.$router.back();
    },
    iptV() {
      if (!this.value) {
        this.flag = "init";
        return;
      }
      // console.log('1');
      this.flag = "notice";
      keyWord({
        keyword: this.value,
        order: "desc",
      }).then((res) => {
        console.log(res);
        this.key = res;
      });
    },
    toGood(val) {
      this.flag = "goodList";
      keyWord({
        keyword: val,
        order: "desc",
      }).then((res) => {
        this.goods = res;
      });
      history({
        keyword: val,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
      });
    },
    toGoodsDetail(id) {
      this.$router.push({path:'/home/goodsDetail',query:{id:id}})

    },
    del() {
      clearhistoryAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        this.init()
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>>